<template>
  <div class="app">
    <van-row style="padding: 16px 20px;">
      <van-col span="4" style="display: flex; align-items: center;">
        <router-link to="javascript:void(0)" class="back-button" @click="$router.go(-1)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="#000000"/>
          </svg>
        </router-link>
      </van-col>

      <van-col span="16">
        <span style="font-size: 18px; font-weight: bold; display: block; text-align: center;">背单词</span>
      </van-col>
    </van-row>
    <div class="user-info">
      <van-avatar size="large" round src="/avatar.jpg" />
      <div class="user-info-content">
        <div class="user-info-content-item">
          <span class="user-info-content-item-value">{{ studyDays.nums }}</span>
          <span class="user-info-content-item-label">学习天数</span>
          <span class="user-info-content-item-value">{{ studyTime.time }}</span>
          <span class="user-info-content-item-label">学习时长</span>

        </div>
      </div>
      <van-button type="primary" round size="small" class="exchange-button">兑换学币</van-button>
    </div>
    <div class="data-info">
      <div class="data-info-item">
        <span class="data-info-item-value">150</span>
        <span class="data-info-item-label">今日单词</span>
      </div>
      <div class="data-info-item">
        <span class="data-info-item-value">{{wordNum}}</span>
        <span class="data-info-item-label">今日背过</span>
      </div>
      <div class="data-info-item">
        <span class="data-info-item-value">{{150-wordNum}}</span>
        <span class="data-info-item-label">剩余单词</span>
      </div>
      <div class="data-info-item">
        <span class="data-info-item-value">2807</span>
        <span class="data-info-item-label">我的单词</span>
      </div>
    </div>
    <van-button type="primary" round size="large" class="start-button" @click="goToWordComponent" >开始学习</van-button>
    <div class="word-progress">
      <div class="word-progress-title">单词进度:<van-progress :percentage="recitationNum/wordbook.num*100" />
      </div>
      <div class="word-progress-status">
        <span class="word-progress-status-item">{{ recitationNum }}</span>
        <span class="word-progress-status-item">已完成</span>
        <span class="word-progress-status-item">{{ wordbook.num }}</span>
        <span class="word-progress-status-item">总共</span>
      </div>
    </div>
    <div class="book-info">
      <van-image class="book-info-cover" width="100" height="120" :src="wordbook.image" />
      <div class="book-info-content">
        <div class="book-info-content-title">{{wordbook.name|| '加载中...'}}</div>
        <div class="book-info-content-desc">{{wordbook.num|| '加载中...'}}</div>
        <div class="book-info-content-people">8236 人正在背诵</div>
      </div>
      <van-button type="primary" round size="small" class="change-book-button" @click="goToWordBook">换单词书</van-button>
    </div>
    <div class="footer">
      <van-button type="primary" round size="small" class="review-button" @click="goToRecitation">复习已背</van-button>
      <van-button type="primary" round size="small" class="collection-button" @click="goToCollectionWord" >收藏的单词</van-button>
    </div>
  </div>
</template>
<script setup>

import { ref, onMounted } from 'vue';

import {get} from "../../util/request.js";
import {useRouter} from "vue-router";


    const router = useRouter(); // 获取路由实例
    const wordbook = ref([]);
    const wordNum = ref(0);
    const recitationNum= ref(0);
    // 定义存储学习天数的数据属性
    const studyDays = ref('');
    // 异步方法发起请求获取学习天数
    const fetchStudyDays = async () => {
      try {
        get('home/topics/getTopics').then(r=>{
          studyDays.value = r.data;
        }); // 替换为实际API地址
         // 假设返回的数据结构包含days字段
      } catch (error) {

      }
    };
    //发送get请求查询当前选择的单词本
    const fetchWordbook = async () => {
      try {
        const res = await get('home/wordBook/getWordBook'); // 确保异步请求完成后再处理响应
        wordbook.value = res.data;
      } catch (error) {
        console.error(error);
      }
    }
    const fetchWordNum = async () => {
      try {
        const res = await get('home/words/getTodayWordNum'); // 确保异步请求完成后再处理响应
        wordNum.value = res.data;
      } catch (error) {
        console.error(error);
      }
    }
    const recitationWordNum = async () => {
      try {
        const res = await get('home/words/recitationWordNum'); // 确保异步请求完成后再处理响应
        recitationNum.value = res.data;
      } catch (error) {
        console.error(error);
      }
    }



    //路由到wordComponent
    const goToWordComponent = () => {
      router.push({ name: 'wordComponent' })
    }
    const goToWordBook = () => {
      router.push({ name: 'wordBook' })
    }
    const goToRecitation = () => {
      router.push({ name: 'wordComponent1' })
    }
    const goToCollectionWord = () => {
      router.push({ name: 'collectionWord' })
    }
    const studyTime = ref('');
    const fetchStudyTime = async () => {
      try {
        const res = await get('home/study-time/getStudyTime'); // 确保异步请求完成后再处理响应
        studyTime.value = res.data;
      } catch (error) {
        console.error(error);
      }
  }

    onMounted(() => {
      fetchStudyDays();
      fetchWordbook();
      fetchWordNum();
      recitationWordNum();
      fetchStudyTime();
    });


</script>
<style scoped>
.app {
  padding: 16px;
}
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.user-info-content {
  display: flex;
  flex-direction: column;
  margin-right: 16px;
}
.user-info-content-item {
  display: flex;
  align-items: center;
}
.user-info-content-item-value {
  font-size: 24px;
  font-weight: bold;
  margin-right: 8px;
}
.user-info-content-item-label {
  font-size: 14px;
  color: #999;
}
.exchange-button {
  width: 100px;
}
.data-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.data-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.data-info-item-value {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}
.data-info-item-label {
  font-size: 12px;
  color: #999;
}
.start-button {
  width: 100%;
  margin-bottom: 16px;
}
.word-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}
.word-progress-title {
  font-size: 16px;
  margin-bottom: 8px;
}
.word-progress-status {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.word-progress-status-item {
  font-size: 14px;
}
.book-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.book-info-cover {
  margin-right: 16px;
}
.book-info-content {
  display: flex;
  flex-direction: column;
}
.book-info-content-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}
.book-info-content-desc {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}
.book-info-content-people {
  font-size: 12px;
  color: #999;
}
.change-book-button {
  width: 100px;
}
.footer {
  display: flex;
  justify-content: space-between;
}
.review-button {
  width: 120px;
}
.collection-button {
  width: 120px;
}
</style>